<template>
    <div class="cartcontrol">
        <transition name="move">
            <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
                <span class="inner icon-remove_circle_outline"></span>
            </div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click="addCart"></div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
  data () {
    return {
    }
  },
  props: {
    food: {
      type: Object
    }
  },
  methods: {
    addCart () {
      if (!this.food.count) {
        Vue.set(this.food, 'count', 1)
      } else {
        this.food.count++
      }
    },
    decreaseCart () {
      this.food.count--
    }
  }
}
</script>
<style scoped  lang="stylus">
    .cartcontrol
        font-size 0
        .move-enter-active, .move-leave-active
            transition: all .4s linear
            opacity: 1
            transform translate3d(0,0,0)
        .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */
            opacity: 0
            transform translate3d(24px,0,0)
        .move-enter-active .inner, .move-leave-active .inner
            transition: all .4s linear
            transform rotate(0)
        .move-enter .inner, .move-leave-to .inner
            transform rotate(180deg)
        .cart-decrease
            display inline-block
            padding 6px
            .inner
                display inline-block
                font-size 24px
                line-height 24px
                color rgb(0,160,220)
        .cart-count
            display inline-block
            vertical-align top
            width 12px
            padding-top 6px
            line-height 24px
            text-align center
            font-size 10px
            color rgb(147,153,159)
        .cart-add
            display inline-block
            padding 6px
            font-size 24px
            line-height 24px
            color rgb(0,160,220)
</style>
